<template>
	<view>
		<view style="height: 30upx;"></view>
		<view class="list-title">
			<view>合计 </view>
			<view style="font-size: 33upx; color: #FF2615;margin: 0 10upx;">{{projectPoints}}</view>
			<view>积分到期失效，请及时兑换。</view>
		</view>
		<view class="earnings-list">
			<view v-for="(item, index) in dataList" :key="item" class="list-item">
				<view class="label-view">
					<view class="label-time">
						<image src="/static/cell-time.png" class="label-icon"></image>
						<view>{{dateFormat(item.createTimes, 'YYYY.MM.DD')}}</view>
					</view>
					<view class="label-desc">{{item.title}}</view>
				</view>
				<view class="value-view">
					<view class="plus-sign">{{ item.status == '10' ? '+' : '-'}}</view>
					<viiew>{{item.points}}</viiew>
				</view>
			</view>
		</view>
		<Empty v-if="!dataList.length"></Empty>
		<view style="height: 160upx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				projectPoints: 0,
				dataList: [],
				queryData: {
					total: 0,
					pageNo: 1,
					pageSize: 15,
				}
			}
		},
		onLoad(options) {
			this.projectPoints = options.projectPoints || 0
			this.getRequestList()
			this.getUserAssets()
		},
		onPullDownRefresh() {
			this.queryData.pageNo = 1
			this.getRequestList()
		},
		onReachBottom() {
			if (this.queryData.total <= this.dataList.length) return
			this.queryData.pageNo += 1
			this.getRequestList()
		},
		methods: {
			async getRequestList() {
				uni.$util.showLoading()
				const res = await uni.$api.getExpirePointsPage(this.queryData).finally(uni.finally)
				const list = res.data.rows || []
				this.queryData.total = res.data.totalRows
				this.dataList = this.queryData.pageNo == 1 ? list : this.dataList.concat(list)
			}
		}
	}
</script>

<style scoped lang="scss">
	.list-title {
		width: 100%;
		@extend .row-start;
		padding-left: 62upx;
		font-size: 25rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #2C1101;
		margin-bottom: 18upx;
		position: relative;
	}

	.earnings-list {
		width: 707rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 14rpx;
		margin-top: 18upx;
		padding: 0 40upx;

		.list-item+.list-item {
			border-top: 1px solid #F7E8E4;
		}

		.list-item {
			width: 100%;
			padding: 27upx 0;
			@extend .row-between;


			.label-view {
				font-size: 25rpx;
				font-weight: 400;
				color: #B8ACA3;

				.label-time {
					@extend .row-start;

					font-size: 29rpx;
					font-weight: 600;
					color: #2C1101;

					.label-icon {
						width: 25upx;
						height: 25upx;
						margin-right: 20upx
					}
				}

				.label-desc {
					padding-left: 45upx
				}
			}

			.value-view {
				@extend .row;
				font-size: 29rpx;
				font-weight: 400;
				color: #FF2615;

				.plus-sign {
					margin-right: 10upx;
				}
			}
		}
	}
</style>